import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types';
import { useQuery } from '@apollo/client';
import { generatePath } from 'react-router-dom';

import Skeleton from 'components/Skeleton';
import Modal from 'components/Modal';
import PostPopup from 'components/PostPopup';
import PostCard from 'components/PostCard';
import { Spacing } from 'components/Layout';
import InfiniteScroll from 'components/InfiniteScroll';
import { Loading } from 'components/Loading';
import Empty from 'components/Empty';

import { PROFILE_PAGE_POSTS_LIMIT } from 'constants/DataLimit';

import { GET_USER_POSTS } from 'graphql/user';

import * as Routes from 'routes';

/**
 * Renders posts in profile page
 */
const ProfilePosts = ({ username }) => {
  const [isPostPopupOpen, setIsPostPopupOpen] = useState(false);
  const [modalPostId, setModalPostId] = useState('');
  const variables = { username, skip: 0, limit: PROFILE_PAGE_POSTS_LIMIT };
  const { data, loading, fetchMore, networkStatus } = useQuery(GET_USER_POSTS, {
    variables,
    notifyOnNetworkStatusChange: true,
  });

  const openModal = (postId) => {
    window.history.pushState('', '', generatePath(Routes.POST, { id: postId }));
    setModalPostId(postId);
    setIsPostPopupOpen(true);
  };

  const closeModal = () => {
    window.history.pushState('', '', generatePath(Routes.USER_PROFILE, { username }));
    setIsPostPopupOpen(false);
  };

  if (loading && networkStatus === 1) {
    return <Skeleton height={500} bottom="lg" top="lg" count={PROFILE_PAGE_POSTS_LIMIT} />;
  }

  const { posts, count } = data.getUserPosts;
  if (!posts.length > 0) {
    return (
      <Spacing bottom="lg">
        <Empty text="No posts yet." />
      </Spacing>
    );
  }

  return (
    <InfiniteScroll
      data={posts}
      dataKey="getUserPosts.posts"
      count={parseInt(count)}
      variables={variables}
      fetchMore={fetchMore}
    >
      {(data) => {
        return data.map((post, i) => {
          const showNextLoading = loading && networkStatus === 3 && data.length - 1 === i;

          return (
            <Fragment key={post.id}>
              {modalPostId === post.id && (
                <Modal open={isPostPopupOpen} onClose={closeModal}>
                  <PostPopup id={post.id} closeModal={closeModal} />
                </Modal>
              )}

              <Spacing bottom="lg">
                <PostCard
                  author={post.author}
                  postId={post.id}
                  imagePublicId={post.imagePublicId}
                  comments={post.comments}
                  title={post.title}
                  image={post.image}
                  likes={post.likes}
                  createdAt={post.createdAt}
                  openModal={() => openModal(post.id)}
                />
              </Spacing>

              {showNextLoading && <Loading top="lg" />}
            </Fragment>
          );
        });
      }}
    </InfiniteScroll>
  );
};

ProfilePosts.propTypes = {
  username: PropTypes.string.isRequired,
};

export default ProfilePosts;
